<template>
  <div style="width: 100%;height: 950px;display: flex;justify-content: center">
    <div style="width:69%;height: 100%;">
      <div style="width: 100%;height: 600px;display: flex;justify-content: center">
        <div style="width: 33%;height: 100%;position: relative;">
          <div class="zzc1"></div>
          <div style="width: 100%;height: 50%;">
            <div class="title_xmxf"></div>
            <div class="text_xmsf">刑满释放人员</div>
            <div class="data_xmsf">176人</div>
            <div id="xmsf_top" style="width: 100%;height: 100%;"></div>
          </div>
          <div style="width: 100%;height: 50%;">
            <div id="xmsf_bottom" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
        <div style="width: 33%;height: 100%;position: relative;margin:0 10px">
          <div class="zzc2"></div>
          <div style="width: 100%;height: 50%;">
            <div class="title_sqjz"></div>
            <div class="text_sqjz">社区矫正人员</div>
            <div class="data_sqjz" id="data_sqjz"></div>
            <div id="sqjz_top" style="width: 100%;height: 100%;"></div>
          </div>
          <div style="width: 100%;height: 50%;">
            <div id="sqjz_bottom" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
        <div style="width: 33%;height: 100%;position: relative;">
          <div class="zzc3"></div>
          <div style="width: 100%;height: 50%;">
            <div class="title_xidu"></div>
            <div class="text_xidu">吸毒人员</div>
            <div class="data_xidu">62人</div>
            <div id="xidu_top" style="width: 100%;height: 100%;"></div>
          </div>
          <div style="width: 100%;height: 50%;">
            <div id="xidu_bottom" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
      </div>
      <div style="width: 100%;height: 420px;position: relative;display: flex;justify-content: center;margin-top:10px;margin-bottom: 30px;">
        <div class="zzc4"></div>
        <div style="width: 45%;height: 100%;">
          <div class="title_zszh"></div>
          <div class="text_zszh">肇事肇祸等严重精神病人员</div>
          <div class="data_zszh">247人</div>
          <div id="zszh" style="width: 100%;height: 100%;"></div>
        </div>
        <div style="width: 30%;height: 100%;position: relative;">
          <div class="title_wuwei"></div>
          <div class="text_wuwei">五位一体包保人员</div>
          <div class="data_wuwei">653人</div>
          <div id="wuwei" style="width: 100%;height: 100%;"></div>
        </div>
        <div style="width: 25%;height: 100%;position: relative;">
          <div class="title_bf"></div>
          <div class="text_bf">帮扶率</div>
          <div id="bf" style="width: 105%;height: 90%;"></div>
        </div>
      </div>
    </div>
    <div style="width: 28%;height: 1029px;position: relative;margin-left: 10px;">
      <div class="zzc5"></div>
      <div style="width: 100%;height: 33.3%;position: relative;">
        <div class="title_azb"></div>
        <div class="text_azb">艾滋病人员</div>
        <div class="data_azb">43人</div>
        <div id="aizi" style="width: 100%;height: 100%;"></div>
      </div>
      <div style="width: 100%;height: 33.3%;position: relative;">
        <div id="aizi_xueli" style="width: 100%;height: 100%;"></div>
      </div>
      <div style="width: 100%;height: 33.3%;position: relative">
        <div class="title_tj"></div>
        <div class="text_tj">感染途径</div>
        <div id="aizi_tj" style="width:100%;height: 100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  communityCorrection,
  educationCorrection
} from '@/http/AppApi'
export default {
  name: 'app',
  data () {
    return {}
  },
  mounted () {
    this.xmsf_top()
    this.xmsf_bottom()
    this.sqjz_top()
    this.sqjz_bottom()
    this.xidu_top()
    this.xidu_bottom()
    this.zszh()
    this.wuwei()
    this.bf()
    this.aizi()
    this.aizi_xueli()
    this.aizi_tj()
  },
  methods: {
    xmsf_top () {
      let xmsfTopEcharts = this.$echarts.init(document.getElementById('xmsf_top'))
      xmsfTopEcharts.setOption({
        tooltip: {},
        grid: {
          top: '10%',
          left: '10%',
          right: '1%',
          bottom: '35%'
        },
        xAxis: {
          type: 'category',
          data: ['危害国家安全罪', '危害公共安全罪', '破坏经济秩序罪', '侵犯公民权利罪', '侵犯财产罪', '妨害管理秩序罪', '危害国防利益罪', '贪污贿赂罪', '渎职罪', '军人违反职责罪'],
          axisLabel: {
            interval: 0,
            rotate: 60,
            textStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '数量',
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          }
        },
        series: [
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#02caff'
              }
            },
            data: [120, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#7345c3'
              }
            },
            data: [0, 200, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#fbde5e'
              }
            },
            data: [0, 0, 150, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#ca406e'
              }
            },
            data: [0, 0, 0, 200, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#0889bc'
              }
            },
            data: [0, 0, 0, 0, 150, 0, 0, 0, 0, 0]
          },
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#8b4ede'
              }
            },
            data: [0, 0, 0, 0, 0, 200, 0, 0, 0, 0]
          },
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#938a5a'
              }
            },
            data: [0, 0, 0, 0, 0, 0, 130, 0, 0, 0]
          },
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#a93b6a'
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 170, 0, 0]
          },
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#3155a3'
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 120, 0]
          },
          {
            name: '原罪名',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#57aca7'
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 100]
          }
        ]
      })
    },
    xmsf_bottom () {
      let xmsfBottomEcharts = this.$echarts.init(document.getElementById('xmsf_bottom'))
      xmsfBottomEcharts.setOption({
        legend: {
          x: 'center',
          y: 15,
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          top: '20%',
          left: '10%',
          right: '1%',
          bottom: '15%'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['男', '女'],
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '人数',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            barWidth: 30,
            stack: '广告',
            color: '#6390e5',
            data: [120, 0]
          },
          {
            name: '女',
            type: 'bar',
            barWidth: 30,
            stack: '广告',
            color: '#eeac53',
            data: [0, 56]
          }
        ]
      })
    },
    sqjz_top () {
      let sqjzTopEcharts = this.$echarts.init(document.getElementById('sqjz_top'))
      educationCorrection().then(resp => {
        if (resp.code && resp.code === '200') {
          document.getElementById('data_sqjz').innerHTML = resp.data[6].price + '人'
          sqjzTopEcharts.setOption({
            tooltip: {},
            grid: {
              top: '10%',
              left: '10%',
              right: '1%',
              bottom: '15%'
            },
            xAxis: {
              type: 'category',
              data: ['小学', '中学', '大专', '本科', '硕士', '其他'],
              axisLabel: {
                interval: 0,
                rotate: 15,
                textStyle: {
                  color: 'white'
                }
              }
            },
            yAxis: {
              type: 'value',
              name: '数量',
              axisLine: {
                lineStyle: {
                  color: 'white'
                }
              },
              axisLabel: {
                textStyle: {
                  color: 'white'
                }
              }
            },
            series: [
              {
                name: '学历',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                itemStyle: {
                  normal: {
                    color: '#02caff'
                  }
                },
                data: [resp.data[0].price, 0, 0, 0, 0, 0]
              },
              {
                name: '学历',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                itemStyle: {
                  normal: {
                    color: '#02caff'
                  }
                },
                data: [0, resp.data[1].price, 0, 0, 0, 0]
              },
              {
                name: '学历',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                itemStyle: {
                  normal: {
                    color: '#7345c3'
                  }
                },
                data: [0, 0, resp.data[2].price, 0, 0, 0]
              },
              {
                name: '学历',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                itemStyle: {
                  normal: {
                    color: '#fbde5e'
                  }
                },
                data: [0, 0, 0, resp.data[3].price, 0, 0]
              },
              {
                name: '学历',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                itemStyle: {
                  normal: {
                    color: '#ca406e'
                  }
                },
                data: [0, 0, 0, 0, resp.data[4].price, 0]
              },
              {
                name: '学历',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                itemStyle: {
                  normal: {
                    color: '#0889bc'
                  }
                },
                data: [0, 0, 0, 0, 0, resp.data[5].price]
              }
            ]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    },
    sqjz_bottom () {
      let sqjzBottomEcharts = this.$echarts.init(document.getElementById('sqjz_bottom'))
      communityCorrection().then(resp => {
        if (resp.code && resp.code === '200') {
          sqjzBottomEcharts.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['男', '女'],
              y: 15,
              textStyle: {
                color: 'white'
              }
            },
            grid: {
              top: '20%',
              left: '10%',
              right: '1%',
              bottom: '20%'
            },
            xAxis: [
              {
                type: 'category',
                data: ['管制', '缓刑', '假释', '暂予监外执行', '剥夺政治权利'],
                axisLabel: {
                  interval: 0,
                  rotate: 30,
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '数量',
                axisLine: {
                  lineStyle: {
                    color: 'white'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            ],
            series: [
              {
                name: '男',
                type: 'bar',
                barWidth: '30',
                stack: '广告',
                data: [
                  resp.data[0][0].price,
                  resp.data[0][1].price,
                  resp.data[0][2].price,
                  resp.data[0][3].price,
                  resp.data[0][4].price
                ],
                color: '#f7ab6b'
              },
              {
                name: '女',
                type: 'bar',
                stack: '广告',
                data: [
                  resp.data[1][0].price,
                  resp.data[1][1].price,
                  resp.data[1][2].price,
                  resp.data[1][3].price,
                  resp.data[1][4].price
                ],
                color: '#964edf'
              }
            ]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    },
    xidu_top () {
      let xiduTopEcharts = this.$echarts.init(document.getElementById('xidu_top'))
      xiduTopEcharts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['男', '女'],
          // y: 15,
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          top: '10%',
          left: '10%',
          right: '1%',
          bottom: '15%'
        },
        xAxis: [
          {
            type: 'category',
            data: ['15-25', '25-35', '35-45', '46+'],
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            barWidth: '30',
            stack: '广告',
            data: [120, 132, 101, 134],
            color: '#6390e5'
          },
          {
            name: '女',
            type: 'bar',
            stack: '广告',
            data: [220, 182, 191, 234],
            color: '#eeac53'
          }
        ]
      })
    },
    xidu_bottom () {
      let xiduBottomEcharts = this.$echarts.init(document.getElementById('xidu_bottom'))
      xiduBottomEcharts.setOption({
        // backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //   offset: 0,
        //   color: '#c86589'
        // },
        //   {
        //     offset: 1,
        //     color: '#06a7ff'
        //   }
        // ], false),
        title: {
          text: '',
          left: 'center',
          bottom: '5%',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        grid: {
          top: '20%',
          left: '15%',
          right: '4%',
          bottom: '25%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['亲友影响', '人生受挫', '被诱骗', '治病引起', '其他'],
          axisLabel: {
            margin: 30,
            color: 'white',
            interval: 0,
            rotate: 30
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: true,
            length: 25,
            lineStyle: {
              color: '#ffffff1f'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ffffff1f'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '人数',
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          position: 'left',
          axisLabel: {
            margin: 20,
            color: 'white'
          },

          axisTick: {
            show: true,
            length: 15,
            lineStyle: {
              color: '#ffffff1f'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ffffff1f'
            }
          }
          // axisLine: {
          //   lineStyle: {
          //     color: '#fff',
          //     width: 2
          //   }
          // }
        }],
        series: [{
          name: '注册总量',
          type: 'line',
          smooth: true,
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: '#eb64fb'
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#fff'
            }
          },
          itemStyle: {
            color: 'red',
            borderColor: '#eb64fb',
            borderWidth: 3
          },
          tooltip: {
            show: false
          },
          areaStyle: {
            normal: {
              // color: '#3fbbff0d',
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#eb64fb'
              },
              {
                offset: 1,
                color: '#3fbbff0d'
              }
              ], false)
            }
          },
          data: [33, 60, 40, 28, 45]
        }]
      })
    },
    zszh () {
      let zszhEcharts = this.$echarts.init(document.getElementById('zszh'))
      zszhEcharts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['三级', '四级', '五级'],
          y: 15,
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          top: '15%',
          left: '1%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['明港镇', '邢集镇', '平昌关镇', '五里镇', '洋河镇', '肖王镇', '龙井乡', '肖店乡', '胡店乡', '彭家湾乡'],
            axisLabel: {
              interval: 0,
              rotate: 30,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '三级',
            type: 'bar',
            stack: '广告',
            data: [18, 6, 4, 11, 9, 10, 19, 2, 16, 12],
            color: '#2d92d3'
          },
          {
            name: '四级',
            type: 'bar',
            stack: '广告',
            data: [7, 14, 11, 19, 14, 15, 18, 2, 16, 4],
            color: '#57aca7'
          },
          {
            name: '五级',
            type: 'bar',
            stack: '广告',
            data: [8, 16, 5, 6, 12, 7, 3, 13, 11, 18],
            color: '#f7ab6b'
          }
        ]
      })
    },
    wuwei () {
      let wuweiEcharts = this.$echarts.init(document.getElementById('wuwei'))
      wuweiEcharts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['男', '女'],
          // orient: 'vertical',
          // x:'right',
          y: 15,
          padding: 2,
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            // onZero: false,
            lineStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          type: 'category',
          name: '年龄',
          data: ['10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70+'],
          axisLine: {
            // onZero: false,
            lineStyle: {
              color: 'white'
            }
          }
        },
        series: [
          {
            name: '男',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [430, 263, 302, 301, 334, 390, 320],
            color: '#2d92d0'
          },
          {
            name: '女',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [320, 221, 132, 101, 134, 90, 230],
            color: '#3becce'
          }
        ]
      })
    },
    bf () {
      let bfEcharts = this.$echarts.init(document.getElementById('bf'))
      bfEcharts.setOption({
        title: {
          text: '',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          left: 'center',
          data: ['已帮助', '未帮助'],
          y: 20,
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '40%',
            center: ['50%', '60%'],
            data: [
              {value: 335, name: '已帮助', color: '#5f57bb'},
              {value: 310, name: '未帮助', color: '#d4b126'}
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    '#5f57bb', '#d4b126'
                  ]
                  return colorList[params.dataIndex]
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    aizi () {
      let aiZiEcharts = this.$echarts.init(document.getElementById('aizi'))
      aiZiEcharts.setOption({
        tooltip: {},
        grid: {
          top: '10%',
          left: '10%',
          right: '1%',
          bottom: '20%'
        },
        legend: {
          itemGap: 50,
          // data: ['注册总量', '最新注册量'],
          textStyle: {
            color: '#f9f9f9',
            borderColor: '#fff'
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#f9f9f9'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#d1e6eb',
              margin: 15
            }
          },
          axisTick: {
            show: false
          },
          data: ['1-3月', '3-6月', '6-9月', '9-12月']
        }],
        yAxis: [{
          type: 'value',
          name: '数量',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          min: 0,
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0a3256'
            }
          },
          // axisLine: {
          //
          // },
          axisLabel: {
            margin: 20,
            textStyle: {
              color: '#d1e6eb'

            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '',
          type: 'line',
          showAllSymbol: true,
          symbol: 'emptyCircle',
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: '#fde51e'
            },
            borderColor: '#f0f'
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#fff'
            }
          },
          itemStyle: {
            normal: {
              color: '#fde51e'

            }
          },
          tooltip: {
            show: false
          },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,154,120,1)'
              },
              {
                offset: 1,
                color: 'rgba(0,0,0, 0)'
              }
              ], false),
              shadowColor: 'rgba(53,142,215, 0.9)',
              shadowBlur: 20
            }
          },
          data: [8, 6, 10, 9]
        }]
      })
    },
    aizi_xueli () {
      let aiziXueliEcharts = this.$echarts.init(document.getElementById('aizi_xueli'))
      aiziXueliEcharts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          x: 'center',
          y: '10%',
          data: ['小学', '初中', '高中', '大学以上'],
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }

          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '60%'],
            label: {},
            data: [
              {value: 335, name: '小学'},
              {value: 310, name: '初中'},
              {value: 234, name: '高中'},
              {value: 135, name: '大学以上'}
            ]
          }
        ]
      })
    },
    aizi_tj () {
      let aiziTjEcharts = this.$echarts.init(document.getElementById('aizi_tj'))
      aiziTjEcharts.setOption({
        backgroundColor: '',
        tooltip: {},
        grid: {
          top: '3%',
          left: '1%',
          right: '1%',
          bottom: '13%',
          containLabel: true
        },
        legend: {
          data: [''],
          right: '10%',
          // y: 10,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        xAxis: {
          data: ['异性传播', '同性传播', '注射毒品传播', '母婴传播', '既往采血浆传播', '不详'],
          axisTick: {
            show: true
          },
          axisLabel: {
            interval: 0,
            rotate: 30,
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',
              width: '1'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [{
          name: '感染途径',
          type: 'bar',
          barWidth: 30,
          data: [10, 52, 200, 334, 390, 330],
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#91e3f7'},
                  // {offset: 0.5, color: '#44C0C1'},
                  {offset: 1, color: '#468cff'}
                ]
              )
            },
            emphasis: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#468cff'},
                  // {offset: 0.7, color: '#44C0C1'},
                  {offset: 1, color: '#91e3f7'}
                ]
              )
            }
          }
        }]
      })
    }
  }
}
</script>

<style scoped>
  .zzc1{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .title_xmxf{
    height: 30px;
    width: 145px;
    background-image: url('~@/assets/bigdata/img/y_xmsf.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 10px auto 0px auto
  }
  .text_xmsf{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 2.4%;
    left: 32%;
  }
  .data_xmsf{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 2.2%;
    left: 54%;
    width:54px;
    text-align: center;
  }
  .zzc2{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .title_sqjz{
    height: 30px;
    width: 145px;
    background-image: url('~@/assets/bigdata/img/y_sqjz.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 10px auto 0px auto
  }
  .text_sqjz{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 2.4%;
    left: 32%;
  }
  .data_sqjz{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 2.2%;
    left: 53.5%;
    width: 58px;
    text-align: center;
  }
  .zzc3{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .title_xidu{
    height: 30px;
    width: 145px;
    background-image: url('~@/assets/bigdata/img/y_xidu.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 10px auto 0px auto
  }
  .text_xidu{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 2.3%;
    left: 35%;
  }
  .data_xidu{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 2.2%;
    left: 53.5%;
    width: 58px;
    text-align: center;
  }
  .zzc4{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .title_zszh{
    height: 30px;
    width: 230px;
    background-image: url('~@/assets/bigdata/img/y_zszh.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 10px auto 0px auto
  }
  .text_zszh{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 3.5%;
    left: 13%;
  }
  .data_zszh{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 3.5%;
    left: 27.3%;
    width: 58px;
    text-align: center;
  }
  .title_wuwei{
    height: 30px;
    width: 175px;
    background-image: url('~@/assets/bigdata/img/y_wuwei.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 10px auto 0px auto
  }
  .text_wuwei{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 3.5%;
    left: 26%;
  }
  .data_wuwei{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 3.4%;
    left: 57.6%;
    width: 58px;
    text-align: center;
  }
  .title_bf{
    height: 30px;
    width: 71px;
    background-image: url('~@/assets/bigdata/img/y_bf.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 10px auto 0px auto
  }
  .text_bf{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 3.5%;
    left: 43%;
  }
  .zzc5{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .title_azb{
    height: 30px;
    width: 145px;
    background-image: url('~@/assets/bigdata/img/y_azb.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 10px auto 0px auto
  }
  .text_azb{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 1%;
    left: 37%;
  }
  .data_azb{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 1%;
    left: 52.8%;
    width: 58px;
    text-align: center;
  }
  .title_tj{
    height: 30px;
    width: 71px;
    background-image: url('~@/assets/bigdata/img/y_tj.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 10px auto 0px auto
  }
  .text_tj{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 1%;
    left: 44.5%;
  }
</style>
